// src/CategoryDetail.tsx
import React from 'react';
import { Layout, Row, Col, Card } from 'antd';
import { useNavigate } from 'react-router-dom';
import Sidebar from './Sidebar';

const { Header, Content } = Layout;

// 👇 为八大菜系定义本地图片路径（与 public/categorypicture 目录对应）
const categoryImages: Record<string, string> = {
  '粤菜': '/categorypicture/yuecai.png',
  '川菜': '/categorypicture/chuancai.png',
  '鲁菜': '/categorypicture/lucai.png',
  '淮扬菜': '/categorypicture/huaiyangcai.png',
  '闽菜': '/categorypicture/mincai.png',
  '徽菜': '/categorypicture/huicai.png',
  '湘菜': '/categorypicture/xiangcai.png',
  '浙菜': '/categorypicture/zhecai.png',
};

// 👇 为八大菜系定义简要描述（已优化）
const categoryDescriptions: Record<string, string> = {
  '粤菜': '海鲜丰富，清淡鲜美',
  '川菜': '麻辣鲜香，重油重味',
  '鲁菜': '咸鲜为主，讲究火候',
  '淮扬菜': '刀工精细，口味平和',
  '闽菜': '汤羹见长，鲜香微甜',
  '徽菜': '山珍野味，重油重色',
  '湘菜': '酸辣开胃，香浓下饭',
  '浙菜': '清新淡雅，注重本味',
};

const CategoryDetail: React.FC = () => {
  const navigate = useNavigate();

  // ✅ 使用图片路径代替 emoji
  const categories = [
    { name: '粤菜' },
    { name: '川菜' },
    { name: '鲁菜' },
    { name: '淮扬菜' },
    { name: '闽菜' },
    { name: '徽菜' },
    { name: '湘菜' },
    { name: '浙菜' },
  ];

   return (
    <Layout style={{ minHeight: '100vh', backgroundImage: "url('/background2.jpg')", backgroundSize: 'cover', backgroundPosition: 'center' }}>
      {/* 左侧：侧边栏 */}
      <Sidebar />

      {/* 右侧：内容区域 */}
      <Layout style={{ background: 'transparent' }}>
        <Header style={{
          background: 'white',
          boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
          padding: '0 40px',
          height: 'auto',
          lineHeight: '64px'
        }}>
          <h2 style={{ margin: 0, fontSize: '24px', fontWeight: 'bold' }}>菜品分类</h2>
        </Header>

        <Content style={{
          padding: '20px 40px',
          margin: 0,
          background: 'transparent',
        }}>
          <Row gutter={[16, 16]}>
            {categories.map((category, index) => (
              <Col key={index} xs={12} sm={8} md={6} lg={6}>
                <Card
                  hoverable
                  style={{
                    textAlign: 'center',
                    background: 'rgba(255, 255, 255, 0.85)',
                    borderRadius: '12px',
                    border: '1px solid #e8d5b5',
                    padding: '24px', // 👈 增加内边距
                    backdropFilter: 'blur(8px)',
                    boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
                    transition: 'all 0.3s ease',
                    cursor: 'pointer',
                    height: '280px', // 👈 固定高度，保证卡片统一
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}
                  bodyStyle={{ padding: '0' }} // 👈 移除默认内边距
                  onClick={() => navigate(`/category/${category.name}`)}
                >
                  {/* 👇 使用更大的图片 */}
                  <img
                    src={categoryImages[category.name]}
                    alt={category.name}
                    style={{
                      width: '120px', // 👈 图片宽度 120px
                      height: '120px', // 👈 图片高度 120px
                      marginBottom: '16px',
                      objectFit: 'contain',
                    }}
                    onError={(e) => {
                      e.currentTarget.src = 'https://via.placeholder.com/120x120?text=无图'; // 👈 默认占位图
                    }}
                  />
                  <div style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '8px' }}>
                    {category.name}
                  </div>
                  {/* 👇 显示简要描述 */}
                  <div style={{ fontSize: '14px', color: '#666', textAlign: 'center' }}>
                    {categoryDescriptions[category.name] || '经典风味'}
                  </div>
                </Card>
              </Col>
            ))}
          </Row>
        </Content>
      </Layout>
    </Layout>
  );
};

export default CategoryDetail;